<%@ page import="model.Users" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="jdk.nashorn.internal.runtime.Undefined" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/css.css">

    <title>用户信息</title>
    <style>
        .HN{
           background-color: #17a2b8;
            color: white;
        }
    </style>


</head>
<body>
<p style="text-align: center; font-size: 1.5rem;">用户信息列表</p>
<div class="container-fluid">
    <div class="row">
        <div class="col-2"></div>
        <div class="col-8">

            姓名<input class="form-control" type="text" id="userName" name="userName">
            <input class="btn btn-primary" type="button" onclick="search()" value="查询">
            <form method="post" action="add">
                <input class="btn btn-primary" type="submit"  value="添加">
            </form>


            <table class="table table-light" style="margin-top: 0.5rem;">
                <tbody>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>籍贯</td>
                    <td>QQ</td>
                    <td>邮箱</td>
                    <td>操作</td>
                </tr>
                </tbody>
                <tfoot id="tfoot">

                </tfoot>

            </table>
            <ul class="pagination">
                <li class="page-item" id="prePage">

                </li>
                <li class="page-item" id="page">

                </li>

                <li class="page-item" id="nextPage">

                </li>
                <li id="pageInf">

                </li>
            </ul>
        </div>
        <div class="col-2"></div>
    </div>

</div>

</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</script>
<script>
    //搜索
    function search() {
        $('#tfoot').html(' ');
        var userName = $("#userName").val();
        var html = '';
        $.post("search", {
            "data": new Date().getDate(),
            "userName": userName
        }, function (data) {

            // var dataJson = JSON.parse(data);

            for (var i = 0 in data.usersList) {


                var id = data.usersList[i].id;
                var userName = data.usersList[i].userName;
                var sex = data.usersList[i].sex;
                var age = data.usersList[i].age;
                var addr = data.usersList[i].addr;
                var QQ = data.usersList[i].qq;
                var email = data.usersList[i].email;


                html = html + '<tr>'
                    + '<td>' + id + '</td>'
                    + '<td>' + userName + '</td>'
                    + '<td>' + sex + '</td>'
                    + '<td>' + age + '</td>'
                    + '<td>' + addr + '</td>'
                    + '<td>' + QQ + '</td>'
                    + '<td>' + email + '</td>'
                    + '<td>'
                    + '<input type="button" onclick="delUser(' + id+','+data.currentPage + ');" class="btn btn-default" value="删除">'
                    + '<input type="button" onclick="uptUser(' + id + ');" class="btn btn-default" value="修改">'
                    + '<input type="button" onclick="det(' + id + ')" class="btn btn-default" value="查看详情">'
                    + '</td>'
                    + '</tr>';

            }
            $('#tfoot').html(html);

            //前一页
            var preHtml = ' <a class="page-link" href="javascript:void(0)" onclick="preSearch(' + data.currentPage + ')"><<</a>';
            $("#prePage").html(preHtml);
            //后一页
            var nextHtml = ' <a class="page-link" href="javascript:void(0)" onclick="nextSearch(' + data.currentPage + ')">>></a>';
            $("#nextPage").html(nextHtml);

            var page = '';
            for (var i = 1; i <= data.totalPage; i++) {
                if(i==data.currentPage){
                    page = page + '<li><a class="page-link HN" href="javascript:void(0)" onclick="Search(' + i + ')">' + i + '</a></li>';
                }else {
                    page = page + '<li ><a class="page-link" href="javascript:void(0)" onclick="Search(' + i + ')">' + i + '</a></li>';
                }

            }
            $("#page").html(page);

            $("#pageInf").html(' <span>共<span id="totalPage"></span>页,一共<span id="totalCount"></span>记录</span>');
            $("#totalCount").html(data.totalCount);
            $("#totalPage").html(data.totalPage);


        })

    }
    function preSearch(currentPage) {
        if (currentPage>1){
            currentPage=currentPage-1;
        }
      Search(currentPage);
    }
    function nextSearch(currentPage) {
          var totalPage=$("#totalPage").html();
          if(currentPage<totalPage){
              currentPage=currentPage+1;
          }
          Search(currentPage);
    }
    //分页
    function Search(currentPage) {
        $('#tfoot').html(' ');
        var userName = $("#userName").val();
        var html = '';
        $.post("search", {
            "data": new Date().getDate(),
            "userName": userName,
            "currentPage": currentPage
        }, function (data) {
            if (data != null || data != undefined) {

                for (var i = 0 in data.usersList) {


                    var id = data.usersList[i].id;
                    var userName = data.usersList[i].userName;
                    var sex = data.usersList[i].sex;
                    var age = data.usersList[i].age;
                    var addr = data.usersList[i].addr;
                    var QQ = data.usersList[i].qq;
                    var email = data.usersList[i].email;


                    html = html + '<tr>'
                        + '<td>' + id + '</td>'
                        + '<td>' + userName + '</td>'
                        + '<td>' + sex + '</td>'
                        + '<td>' + age + '</td>'
                        + '<td>' + addr + '</td>'
                        + '<td>' + QQ + '</td>'
                        + '<td>' + email + '</td>'
                        + '<td>'
                        + '<input type="button" onclick="delUser(' + id + ',' + data.currentPage + ');" class="btn btn-default" value="删除">'
                        + '<input type="button" onclick="uptUser(' + id + ');" class="btn btn-default" value="修改">'
                        + '<input type="button" onclick="det(' + id + ')" class="btn btn-default" value="查看详情">'
                        + '</td>'
                        + '</tr>';
                }
                $('#tfoot').html(html);

                //前一页
                var preHtml = ' <a class="page-link" href="javascript:void(0)" onclick="preSearch(' + data.currentPage + ')"><<</a>';
                $("#prePage").html(preHtml);
                //后一页
                var nextHtml = ' <a class="page-link" href="javascript:void(0)" onclick="nextSearch(' + data.currentPage + ')">>></a>';
                $("#nextPage").html(nextHtml);

                var page = '';
                for (var i = 1; i <= dataJson.totalPage; i++) {
                    if(i==data.currentPage){
                        page = page + '<li><a class="page-link HN" href="javascript:void(0)" onclick="Search(' + i + ')">' + i + '</a></li>';
                    }else {
                        page = page + '<li ><a class="page-link" href="javascript:void(0)" onclick="Search(' + i + ')">' + i + '</a></li>';
                    }
                }
                $("#page").html(page);
                $("#pageInf").html(' <span>共<span id="totalPage"></span>页,一共<span id="totalCount"></span>记录</span>');
                $("#totalCount").html(data.totalCount);
                $("#totalPage").html(data.totalPage);

            }


        })

    }

    //删除用户
    function delUser(id,currentPage) {
        var currentPage=currentPage;
        var userName = $("#userName").val();
        var html = '';
        if(confirm("是否删除")) {
            $.post("delUsers", {"data": new Date().getDate(), "id": id, "userName": userName}, function (data) {
                if (data != null || data != undefined) {

                    for (var i = 0 in data.usersList) {


                        var id = data.usersList[i].id;
                        var userName = data.usersList[i].userName;
                        var sex = data.usersList[i].sex;
                        var age = data.usersList[i].age;
                        var addr = data.usersList[i].addr;
                        var QQ = data.usersList[i].qq;
                        var email = data.usersList[i].email;


                        html = html + '<tr>'
                            + '<td>' + id + '</td>'
                            + '<td>' + userName + '</td>'
                            + '<td>' + sex + '</td>'
                            + '<td>' + age + '</td>'
                            + '<td>' + addr + '</td>'
                            + '<td>' + QQ + '</td>'
                            + '<td>' + email + '</td>'
                            + '<td>'
                            + '<input type="button" onclick="delUser(' + id + ',' + data.currentPage + ');" class="btn btn-default" value="删除">'
                            + '<input type="button" onclick="uptUser(' + id + ');" class="btn btn-default" value="修改">'
                            + '<input type="button" onclick="det(' + id + ')" class="btn btn-default" value="查看详情">'
                            + '</td>'
                            + '</tr>';
                    }
                    $('#tfoot').html(html);

                    //前一页
                    var preHtml = ' <a class="page-link" href="javascript:void(0)" onclick="preSearch(' + data.currentPage + ')"><<</a>';
                    $("#prePage").html(preHtml);
                    //后一页
                    var nextHtml = ' <a class="page-link" href="javascript:void(0)" onclick="nextSearch(' + data.currentPage + ')">>></a>';
                    $("#nextPage").html(nextHtml);

                    var page = '';
                    for (var i = 1; i <= data.totalPage; i++) {

                        if(i==data.currentPage){
                            page = page + '<li><a class="page-link HN" href="javascript:void(0)" onclick="Search(' + i + ')">' + i + '</a></li>';
                        }else {
                            page = page + '<li ><a class="page-link" href="javascript:void(0)" onclick="Search(' + i + ')">' + i + '</a></li>';
                        }
                    }
                    $("#page").html(page);
                    $("#pageInf").html(' <span>共<span id="totalPage"></span>页,一共<span id="totalCount"></span>记录</span>');
                    $("#totalCount").html(data.totalCount);
                    $("#totalPage").html(data.totalPage);
                }
                }
            )
        }
    }

    //更新用户信息
    function uptUser(id) {
        // $.post("uptPage", {"data": new Date().getDate(), "id": id}, function (data) {
        //     alert("条状中");
        // })
        location.href = "${pageContext.request.contextPath}/uptPage?id=" + id;
    }

    //用户详情
    function det(id) {
        location.href = "${pageContext.request.contextPath}/det?id=" + id;
    }
</script>
</html>
